<template>
    <div class="detail">
        <div class="detail-container">
            <el-row class="detail-body">
                <el-col :span="4" class="left-body">
                    <div class="avatar-box">
                        <el-avatar :size="100" :src="logo"></el-avatar>
                        <h5 class="user-name">lmf0519</h5>
                        <p class="user-contact text-gray">lmf</p>
                        <p class="user-tel text-gray">18977776666</p>
                        <el-dropdown placement="bottom-start">
                            <el-button type="primary">
                                管理<i
                                    class="el-icon-arrow-down el-icon--right"
                                ></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>设置头像</el-dropdown-item>
                                <el-dropdown-item>重置头像</el-dropdown-item>
                                <el-dropdown-item>编辑</el-dropdown-item>
                                <el-dropdown-item>删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <el-divider></el-divider>
                    <div class="contact-box">
                        <h4 class="card-title">联系人</h4>
                        <el-divider class="divider"></el-divider>
                        <ul @click="openContactDialog">
                            <li>
                                <p class="">wt</p>
                                <p class="text-gray">bb/</p>
                            </li>
                            <li><i class="el-icon-arrow-right"></i></li>
                        </ul>
                        <el-divider class="divider"></el-divider>
                        <div style="text-align: center; margin-top: 20px">
                            <el-button
                                round
                                plain
                                type="primary"
                                @click="openNewDialog"
                                >新建联系人</el-button
                            >
                        </div>
                    </div>
                    <el-divider class="last-divider"></el-divider>
                    <div class="recent-history">
                        <h4 class="card-title">最近浏览</h4>
                        <ul>
                            <li v-for="item in 2" :key="item">
                                <el-avatar
                                    :size="50"
                                    :src="logo"
                                    class="history-logo"
                                ></el-avatar>
                                <div>
                                    <p>系统管理员</p>
                                    <p class="text-gray">2024/5/19 15:59:04</p>
                                </div>
                            </li>
                        </ul>
                        <div style="text-align: center; margin-top: 20px">
                            <el-button
                                round
                                plain
                                type="primary"
                                @click="openHistoryDialog"
                                >查看全部</el-button
                            >
                        </div>
                    </div>
                </el-col>
                <el-col :span="20" class="right-body">
                    <el-tabs
                        v-model="activeName"
                        type="card"
                        @tab-click="handleClick"
                    >
                        <el-tab-pane
                            label="客户信息"
                            name="info"
                            class="tab-pane-item"
                        >
                            <el-row class="item-inner">
                                <el-col :span="14" class="left-list">
                                    <div class="card-title">基本信息</div>
                                    <el-divider class="divider"></el-divider>
                                    <el-row
                                        v-for="item in basicForm"
                                        :key="item"
                                    >
                                        <el-col :span="3" class="key-name"
                                            >{{ item.label }}:</el-col
                                        >
                                        <el-col :span="21" class="value-name">{{
                                            item.value || "--"
                                        }}</el-col>
                                        <el-divider
                                            class="divider"
                                        ></el-divider>
                                    </el-row>
                                    <el-tabs
                                        v-model="activeName2"
                                        @tab-click="handleClick2"
                                    >
                                        <el-tab-pane
                                            label="主要负责人"
                                            name="main"
                                            style="padding: 10px 0"
                                        >
                                            <el-row
                                                v-for="item in mainForm"
                                                :key="item"
                                            >
                                                <el-col
                                                    :span="3"
                                                    class="key-name"
                                                    >{{ item.label }}:</el-col
                                                >
                                                <el-col
                                                    :span="21"
                                                    class="value-name"
                                                    >{{
                                                        item.value || "--"
                                                    }}</el-col
                                                >
                                                <el-divider
                                                    class="divider"
                                                ></el-divider>
                                            </el-row>
                                        </el-tab-pane>
                                        <el-tab-pane
                                            label="开票信息"
                                            name="invoice"
                                            style="padding: 10px 0"
                                        >
                                            <el-row
                                                v-for="item in invoiceForm"
                                                :key="item"
                                            >
                                                <el-col
                                                    :span="3"
                                                    class="key-name"
                                                    >{{ item.label }}:</el-col
                                                >
                                                <el-col
                                                    :span="21"
                                                    class="value-name"
                                                    >{{
                                                        item.value || "--"
                                                    }}</el-col
                                                >
                                                <el-divider
                                                    class="divider"
                                                ></el-divider>
                                            </el-row>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-col>
                                <el-col :span="10" class="right-records">
                                    <div class="top-handle">
                                        <div>跟进记录</div>
                                        <el-button type="primary" round
                                            >新建跟进</el-button
                                        >
                                    </div>
                                    <el-divider></el-divider>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane
                            label="项目"
                            name="project"
                            class="tab-pane-item"
                        >
                            <div class="desc-title">EPC项目</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="项目编码">
                                </el-table-column>
                                <el-table-column prop="name" label="项目名称">
                                </el-table-column>
                                <el-table-column
                                    prop="name"
                                    label="项目估算(万元)"
                                >
                                </el-table-column>
                                <el-table-column prop="status" label="项目状态">
                                </el-table-column>
                                <el-table-column prop="type" label="项目类型">
                                </el-table-column>
                                <el-table-column prop="time" label="立项日期">
                                </el-table-column>
                            </el-table>
                            <div class="desc-title">单体项目/EPC子项目列表</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="项目编码">
                                </el-table-column>
                                <el-table-column prop="name" label="项目名称">
                                </el-table-column>
                                <el-table-column
                                    prop="name"
                                    label="项目估算(万元)"
                                >
                                </el-table-column>
                                <el-table-column prop="status" label="项目状态">
                                </el-table-column>
                                <el-table-column prop="type" label="项目类型">
                                </el-table-column>
                                <el-table-column prop="time" label="立项日期">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane
                            label="报价"
                            name="quotation"
                            class="tab-pane-item"
                        >
                            <div class="desc-title">报价记录</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="报价单位">
                                </el-table-column>
                                <el-table-column prop="name" label="制单人">
                                </el-table-column>
                                <el-table-column prop="name" label="报价日期">
                                </el-table-column>
                                <el-table-column prop="status" label="订单金额">
                                </el-table-column>
                                <el-table-column prop="type" label="运费">
                                </el-table-column>
                                <el-table-column prop="time" label="其它费用">
                                </el-table-column>
                                <el-table-column prop="time" label="合计金额">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane
                            label="合同"
                            name="contract"
                            class="tab-pane-item"
                        >
                            <div class="desc-title">项目合同</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                show-summary
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="合同编码">
                                </el-table-column>
                                <el-table-column prop="name" label="签约日期">
                                </el-table-column>
                                <el-table-column prop="name" label="合同日期">
                                </el-table-column>
                                <el-table-column prop="status" label="合同金额">
                                </el-table-column>
                                <el-table-column
                                    prop="type"
                                    label="实际合同金额"
                                >
                                </el-table-column>
                                <el-table-column prop="time" label="已回款">
                                </el-table-column>
                                <el-table-column prop="time" label="未回款">
                                </el-table-column>
                                <el-table-column prop="time" label="已开票">
                                </el-table-column>
                                <el-table-column prop="time" label="未开票">
                                </el-table-column>
                            </el-table>
                            <div class="desc-title">合同洽商</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                show-summary
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="洽谈编号">
                                </el-table-column>
                                <el-table-column prop="name" label="洽商单名称">
                                </el-table-column>
                                <el-table-column prop="name" label="合同编号">
                                </el-table-column>
                                <el-table-column prop="status" label="洽谈类别">
                                </el-table-column>
                                <el-table-column prop="type" label="签约日期">
                                </el-table-column>
                                <el-table-column prop="time" label="洽谈金额">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane
                            label="订单"
                            name="order"
                            class="tab-pane-item"
                        >
                            <div class="desc-title">销售订单</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                show-summary
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="订单编号">
                                </el-table-column>
                                <el-table-column prop="name" label="销售日期">
                                </el-table-column>
                                <el-table-column prop="name" label="订单金额">
                                </el-table-column>
                                <el-table-column prop="status" label="运费">
                                </el-table-column>
                                <el-table-column prop="type" label="其它费用">
                                </el-table-column>
                                <el-table-column
                                    prop="time"
                                    label="实际合同金额"
                                >
                                </el-table-column>
                                <el-table-column prop="time" label="已回款">
                                </el-table-column>
                                <el-table-column prop="time" label="未回款">
                                </el-table-column>
                                <el-table-column prop="time" label="已开票">
                                </el-table-column>
                                <el-table-column prop="time" label="未开票">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane
                            label="发票"
                            name="invoice"
                            class="tab-pane-item"
                        >
                            <div class="desc-title">开票记录</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                show-summary
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="开票单号">
                                </el-table-column>
                                <el-table-column prop="name" label="合同编号">
                                </el-table-column>
                                <el-table-column prop="name" label="合同名称">
                                </el-table-column>
                                <el-table-column prop="status" label="开票日期">
                                </el-table-column>
                                <el-table-column prop="type" label="期次">
                                </el-table-column>
                                <el-table-column
                                    prop="time"
                                    label="开票金额(含税)"
                                >
                                </el-table-column>
                                <el-table-column
                                    prop="time"
                                    label="开票金额(非税)"
                                >
                                </el-table-column>
                                <el-table-column prop="time" label="税率">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane
                            label="回款"
                            name="refund"
                            class="tab-pane-item"
                        >
                            <div class="desc-title">回款计划</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                show-summary
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="查看">
                                </el-table-column>
                                <el-table-column prop="name" label="合同编号">
                                </el-table-column>
                                <el-table-column prop="name" label="合同名称">
                                </el-table-column>

                                <el-table-column prop="type" label="期次">
                                </el-table-column>
                                <el-table-column prop="status" label="计划日期">
                                </el-table-column>
                                <el-table-column prop="time" label="状态">
                                </el-table-column>
                                <el-table-column prop="time" label="金额">
                                </el-table-column>
                                <el-table-column prop="time" label="已回款">
                                </el-table-column>
                                <el-table-column prop="time" label="未回款">
                                </el-table-column>
                            </el-table>
                            <div class="desc-title">回款记录</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                show-summary
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="查看">
                                </el-table-column>
                                <el-table-column prop="name" label="合同编号">
                                </el-table-column>
                                <el-table-column prop="name" label="合同名称">
                                </el-table-column>
                                <el-table-column prop="status" label="日期">
                                </el-table-column>
                                <el-table-column prop="type" label="期次">
                                </el-table-column>

                                <el-table-column prop="time" label="金额">
                                </el-table-column>
                                <el-table-column prop="time" label="累计回款">
                                </el-table-column>
                                <el-table-column prop="time" label="收款人">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane
                            label="售后"
                            name="afterSale"
                            class="tab-pane-item"
                        >
                            <div class="desc-title">售后工单</div>
                            <el-table
                                :data="tableData"
                                border
                                style="width: 100%"
                                show-summary
                            >
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="code" label="工单编号">
                                </el-table-column>
                                <el-table-column prop="name" label="合同编号">
                                </el-table-column>
                                <el-table-column prop="name" label="投诉主题">
                                </el-table-column>
                                <el-table-column prop="status" label="日期">
                                </el-table-column>
                                <el-table-column prop="type" label="分类">
                                </el-table-column>

                                <el-table-column prop="time" label="工时">
                                </el-table-column>
                                <el-table-column prop="time" label="单价">
                                </el-table-column>
                                <el-table-column prop="time" label="工时费用">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </div>
        <!-- 弹出框  新建联系人-->
        <el-dialog title="新建联系人" :visible.sync="newDialog">
            <el-form label-position="left" label-width="50px">
                <el-form-item label="姓名">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="职位">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="附件">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :auto-upload="false"
                    >
                        <el-button slot="trigger" size="small" type="primary"
                            ><i class="el-icon-plus"></i>添加</el-button
                        >
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="newDialog = false">取 消</el-button>
                <el-button type="primary" @click="newDialog = false"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
        <!-- 弹出框 浏览记录 -->
        <el-dialog
            title="查看浏览记录"
            :visible.sync="historyDialog"
            width="40%"
        >
            <el-tabs v-model="activeName3" @tab-click="handleClick">
                <el-tab-pane label="明细模式" name="first">
                    <el-button type="text" style="float: right">导出</el-button>
                    <el-table
                        :data="tableData"
                        style="width: 100%; margin: 10px 0"
                    >
                        <el-table-column
                            type="index"
                            label="序号"
                        ></el-table-column>
                        <el-table-column prop="name" label="员工姓名">
                        </el-table-column>
                        <el-table-column prop="time" label="时间">
                        </el-table-column>
                        <el-table-column prop="remarks" label="备注">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400"
                        style="margin-top: 10px"
                        background
                    >
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="合并模式" name="second">
                    <el-button type="text" style="float: right">导出</el-button>
                    <el-table
                        :data="tableData"
                        style="width: 100%; margin: 10px 0"
                    >
                        <el-table-column
                            type="index"
                            label="序号"
                        ></el-table-column>
                        <el-table-column prop="name" label="员工姓名">
                        </el-table-column>
                        <el-table-column prop="times" label="次数">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400"
                        background
                    >
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <!-- 查看联系人 弹出框 -->
        <el-dialog title="查看联系人" :visible.sync="contactDialog" width="40%">
            <el-table :data="tableData" style="width: 100%; margin: 10px 0">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="position" label="职位">
                </el-table-column>
                <el-table-column prop="telphone" label="手机">
                </el-table-column>
                <el-table-column prop="tel" label="电话"> </el-table-column>
                <el-table-column prop="email" label="邮箱"> </el-table-column>
                <el-table-column prop="remarks" label="备注"> </el-table-column>
                <el-table-column prop="file" label="附件"> </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import logoImg from "@/assets/logo/logo.png";
import { getDetailCustomer } from "@/api/system/customer";
export default {
    data() {
        return {
            logo: logoImg,
            activeName: "info",
            activeName2: "main",
            activeName3: "first",
            newDialog: false,
            historyDialog: false,
            contactDialog: false,
            basicForm: [
                { label: "客户名称", value: "", key: "customerName" },
                { label: "客户属性", value: "", key: "customerAttributeId" },
                { label: "上级公司", value: "", key: "companyId" },
                { label: "客户地址", value: "", key: "customerAddress" },
                { label: "电话", value: "", key: "telPhone" },
                { label: "信用度", value: "", key: "creditRating" },
                { label: "备注", value: "", key: "remarks" },
                { label: "附件", value: "", key: "file" },
            ],
            mainForm: [
                { label: "姓名", value: "", key: "contactsName" },
                { label: "职位", value: "", key: "contactsPosition" },
                { label: "手机", value: "", key: "contactsPhone" },
                { label: "邮箱", value: "", key: "contactsEmail" },
                { label: "电话", value: "", key: "contactsTel" },
                { label: "备注", value: "", key: "remarks" },
            ],
            invoiceForm: [
                { label: "开票公司名称", value: "", key: "" },
                { label: "纳税人识别号", value: "", key: "" },
                { label: "开户地址", value: "", key: "" },
                { label: "电话", value: "", key: "" },
                { label: "开户银行", value: "", key: "" },
                { label: "银行账号", value: "", key: "" },
            ],
            fileList: [],
            contacts: [
                { label: "姓名", value: "", key: "" },
                { label: "职位", value: "", key: "" },
                { label: "手机", value: "", key: "" },
                { label: "电话", value: "", key: "" },
                { label: "邮箱", value: "", key: "" },
                { label: "备注", value: "", key: "" },
                { label: "附件", value: "", key: "" },
            ],
        };
    },
    methods: {
        //请求详情页数据
        getData(id) {
            getDetailCustomer(id).then((res) => {
                console.log("请求详情数据", res);
            });
        },
        // 打开新建联系人对话框
        openNewDialog() {
            this.newDialog = true;
        },
        // 打开 查看全部历史记录
        openHistoryDialog() {
            this.historyDialog = true;
        },
        //查看联系人
        openContactDialog() {
            this.contactDialog = true;
        },
    },
    created() {
        this.getData(this.$route.query.id);
    },
};
</script>
<style lang="scss" scoped>
.detail {
    background: #f1f4f5;
    height: 100%;
}
.divider {
    margin: 20px 0;
}
.detail-bg {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 10px;
    padding-right: 10px;
}
.detail-container {
    width: 98%;
    margin: 1%;
    background: #fff;
    z-index: 3;
    position: relative;
    border-radius: 10px;
    padding: 20px;
}
.detail-body {
    padding: 20px;
    .left-body {
        border-right: 1px dashed #e4eaec;
        .last-divider {
            margin: 0;
        }
    }
}
.avatar-box {
    text-align: center;
    padding-top: 20px;
    .user-name {
        font-weight: 400;
        line-height: 1.2;
        font-size: 18px;
        margin: 10px;
    }
    .user-contact,
    .user-tel {
        color: #a3afb7;
        font-size: 12px;
    }
}
.card-title {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    margin-bottom: 20px;
}
.contact-box {
    padding: 20px;
    ul {
        display: flex;
        justify-content: space-between;
        padding-left: 20px;
        align-items: center;
        margin: 0;
        li {
            font-size: 12px;
        }
    }
    .divider {
        margin: 0;
    }
}
.recent-history {
    padding: 20px;
    padding-top: 40px;
    ul {
        padding-left: 0;
    }
    li {
        display: flex;
        align-items: center;
        font-size: 12px;
        .history-logo {
            margin-right: 15px;
        }
    }
}
.right-body {
    padding: 0 10px;
    .tab-pane-item {
        // padding: 10px;
        .left-list {
            border-right: 1px dashed #e4eaec;
            padding: 10px;
            .key-name {
                color: #aaa;
                font-size: 12px;
            }
            .value-name {
                color: #555;
                font-size: 12px;
            }
        }
        .right-records {
            padding-left: 20px;

            .top-handle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                font-weight: 400;
            }
        }
    }
}
.desc-title {
    font-size: 14px;
}
</style>
